<template>
  <div class="container">
    <div>
    <el-col :span="5">
      <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#f5f5f5">
        <el-submenu index="/sys-user/product/orders">
          <template slot="title">
            <i class="el-icon-s-goods"></i>
            <span>我的订单</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1"><b>全部订单</b></el-menu-item>
            <el-menu-item index="1-2">待付款</el-menu-item>
            <el-menu-item index="1-3">待收货</el-menu-item>
            <el-menu-item index="1-4">待评价</el-menu-item>
            <el-menu-item index="1-5">已取消</el-menu-item>
            <el-menu-item index="1-6">退货退款</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>资料修改</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1"><b>修改密码</b></el-menu-item>
            <el-menu-item index="2-2">个人资料</el-menu-item>
            <el-menu-item index="2-2">上传头像</el-menu-item>
            <el-menu-item index="2-2">收货管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </el-menu>
    </el-col>
    <!--左侧导航结束-->
    <el-col :span="19">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column prop="orderNumber" label="订单号" width="160px" align="center" @click="$router.push('/sys-user/product/details')"></el-table-column>
        <el-table-column
            label="封面图片"
            width="120"
            align="center">
          <template slot-scope="scope">
            <el-image
                style="width: 80px; height: 80px"
                :src="JSON.parse(scope.row.productImage)[0].url"
                fit="fit"></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="productName" label="商品名称" width="100" align="center"
            :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="price" label="小计金额" width="100" align="center">
        </el-table-column>
        <el-table-column
            prop="gmtCreate" label="下单时间" width="120" align="center">
        </el-table-column>
        <el-table-column
            prop="afterService"
            label="售后"
            width="80"
            align="center">
          <template slot-scope="scope">
            <div>
              <el-link href="tencent://message/?uin=422571875&Site=在线QQ&Menu=yes" type="primary" :underline="false">
                申请售后
              </el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="operate"
            label="操作"
            width="100"
            align="center">
          <template>
            <el-button size="small">确认收货</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="stateId" label="订单状态" width="100" align="center">
          <template slot-scope="scope">
            {{ getStateName(scope.row.stateId) }}
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    </div>

    <div style="position: relative;top: 620px;right: 250px;margin-bottom: 50px">
      <el-pagination
          @current-change="changePage"
          :hide-on-single-page="true"
          :page-size="pageSize"
          :current-page="currentPage"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<style scoped>
@import "/src/views/sys-user/bootstrap3/css/bootstrap.css";

.cart-sum {
  font-size: 16px;
  display: flex;
  align-items: center;
}

.total-text {
  margin: 0 0 0 12px;
}

.total-symbol {
  font-weight: 400;
  margin-right: 12px;
  font-size: 20px;
  color: #ff5000;
}
</style>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '已签收'
      }],
      value: '',
      statsOptions: [],
      tableData: [],

      orderTotalPrice: 0.0,
      cartTotalCount: 0,

      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      pageSize: 5,
      pageCount: 1,
      total: 0,

      history: [],
    };
  },
  methods: {
    getStateName(stateId) {
      // 在这里根据 stateId 返回订单状态名称
      // 可以使用 switch/case 语句或其他适当的逻辑处理
      switch (stateId) {
        case 1:
          return '待付款';
        case 2:
          return '待发货';
        case 3:
          return '已发货';
        case 4:
          return '已完成';
        default:
          return '未知状态';
      }
    },


    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },

    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    calculateOrderTotalPrice() {
      this.orderTotalPrice = 0;
      if (this.tableData && this.tableData.length > 0) {
        this.tableData.forEach((item) => {
          this.orderTotalPrice += item.totalPrice;
        });
      }
    },

    changePage(page) {
      this.$router.replace('?page=' + page);
      this.loadOrderList();
    },

    loadOrderList() {
      let page = this.$router.currentRoute.query.page;
      if (!page || isNaN(page)) {
        page = 1;
      }

      let url = 'http://localhost:14001/orders/list?pageNum=' + page;

      let localJwt = JSON.parse(localStorage.getItem('localJwt'));

      this.axios.create({
        baseURL: 'http://localhost:14001/',
        headers: {
          'Authorization': localJwt.token
        }
      }).get(url)
          .then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state === 20000) {
              this.tableData = jsonResult.data.list;
              this.currentPage = jsonResult.data.currentPage;
              this.pageSize = jsonResult.data.pageSize;
              this.pageCount = jsonResult.data.maxPage;
              this.total = jsonResult.data.total;
              this.calculateOrderTotalPrice();
            }
          });
    }
  },

  mounted() {
    this.loadOrderList();

  },

  computed: {
    filteredStatsOptions() {
      return (selectedStateId) => {
        if (selectedStateId >= 3 && selectedStateId <= 7) {
          if (selectedStateId === 5) {
            return this.statsOptions.filter((option) => option.id >= 5 && option.id <= 6);
          } else {
            return this.statsOptions.filter((option) => option.id >= 3 && option.id <= 7);
          }
        } else {
          return [];
        }
      };
    },
  },
}
</script>